import React, { useState } from "react";
import { Alert, FlatList, Image, Text, TouchableOpacity, View } from "react-native";

export default function SelectCoverScreen({ navigation, route }: any) {
  // 模拟默认封面图
  const defaultCovers = [
    {
      id: "1",
      name: "黄金年卡",
      image: "https://picsum.photos/750/400?gold",
      color: "#FFD700",
    },
    {
      id: "2",
      name: "季度畅享卡",
      image: "https://picsum.photos/750/400?orange",
      color: "#FF6A00",
    },
    {
      id: "3",
      name: "轻享月卡",
      image: "https://picsum.photos/750/400?blue",
      color: "#4FC3F7",
    },
    {
      id: "4",
      name: "体验次数卡",
      image: "https://picsum.photos/750/400?gray",
      color: "#607D8B",
    },
    {
      id: "5",
      name: "通用会员卡",
      image: "https://picsum.photos/750/400?minimal",
      color: "#9E9E9E",
    },
  ];

  const [selectedId, setSelectedId] = useState<string | null>(null);

  const handleSelect = (cover: any) => {
    setSelectedId(cover.id);
  };

  const handleConfirm = () => {
    if (!selectedId) {
      Alert.alert("提示", "请选择一个封面图");
      return;
    }

    const selectedCover = defaultCovers.find((c) => c.id === selectedId);
    Alert.alert("已选择", `你选择了「${selectedCover?.name}」`);
    // 可返回上个页面并传递选中的图片
    // navigation.navigate("AddMemberCard", { cover: selectedCover.image });
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#F5F5F5" }}>
      <Text
        style={{
          fontSize: 20,
          fontWeight: "bold",
          paddingHorizontal: 16,
          paddingTop: 20,
          marginBottom: 10,
        }}
      >
        选择会员卡封面
      </Text>

      <FlatList
        data={defaultCovers}
        keyExtractor={(item) => item.id}
        numColumns={2}
        columnWrapperStyle={{ justifyContent: "space-between", paddingHorizontal: 16 }}
        contentContainerStyle={{ paddingBottom: 100 }}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => handleSelect(item)}
            style={{
              width: "48%",
              backgroundColor: "#fff",
              borderRadius: 12,
              marginBottom: 16,
              overflow: "hidden",
              borderWidth: selectedId === item.id ? 2 : 1,
              borderColor: selectedId === item.id ? "#FF6A00" : "#E0E0E0",
            }}
          >
            <Image
              source={{ uri: item.image }}
              style={{ width: "100%", height: 120 }}
              resizeMode="cover"
            />
            <View style={{ padding: 8 }}>
              <Text
                style={{
                  textAlign: "center",
                  fontWeight: "600",
                  color: selectedId === item.id ? "#FF6A00" : "#333",
                }}
              >
                {item.name}
              </Text>
            </View>
          </TouchableOpacity>
        )}
      />

      {/* 底部按钮 */}
      <TouchableOpacity
        onPress={handleConfirm}
        style={{
          position: "absolute",
          bottom: 30,
          left: 20,
          right: 20,
          backgroundColor: "#FF6A00",
          borderRadius: 30,
          paddingVertical: 14,
          alignItems: "center",
          shadowColor: "#000",
          shadowOpacity: 0.2,
          shadowRadius: 4,
          elevation: 3,
        }}
      >
        <Text style={{ color: "#fff", fontSize: 16, fontWeight: "bold" }}>确认选择</Text>
      </TouchableOpacity>
    </View>
  );
}